<template>
<div>
  <backHeader title='信息公告'></backHeader>
  <div class="list">
      <div class="item" v-for="(item,index) in messageInfo" :key='index' @click='intoMessage(item)'>
          <div class="title_wrap">
              <div class="title">{{item.title}}</div>
              <img class="icon" src="~images/icon/messageInfo.svg">
          </div>
          <div class="time">{{item.time}}</div>
          <div class="content">
              <p>{{item.content}}</p>
          </div>
      </div>
  </div>
</div>
</template>

<script>
import backHeader from '../../components/backHeader'
export default {
    components:{
        backHeader
    },
    data(){
        return{
            messageInfo:[{
                title:'入款卡更新',
                time:'2019-10-18 05:50:48',
                content:'有冒充客服给您发二维码付款 如有遇到不用理睬 ，客服 不会给任何客户发送二维码 银行卡等付款方式 如要充值请客户登入网站 查看充值方式。'
            }],
        }
    },
    methods:{
        intoMessage(item){
            this.$router.push({name:'messageInfo',params:{item}})
        }
    }
}
</script>

<style long='less' scoped>
.list {
    -ms-flex: 1 1;
    flex: 1 1;
    overflow-x: hidden;
    overflow-y: scroll;
    width: 95%;
    margin: 8px auto 0;
}
.list .item {
    background-color: #fdfdfd;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 16px;
    width: 100%;
    overflow: hidden;
    margin-bottom: 12px;
    border-radius: 3px;
    -webkit-box-shadow: 0 2px 4px hsla(0,0%,60%,.3);
    box-shadow: 0 2px 4px hsla(0,0%,60%,.3);
}
.list .item .title_wrap {
    margin-bottom: 8px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
}
.list .item .title_wrap .title {
    -ms-flex: 1 1;
    flex: 1 1;
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    font-size: 16px;
    color: #333;
    margin-right: 20px;
}
.list .item .title_wrap .icon {
    height: 20px;
}
.list .item .time {
    font-size: 14px;
    color: #666;
}
.list .item .content, .list .item .content img {
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.list .item .content {
    height: 72px;
    padding: 8px 0 16px;
    overflow: hidden;
    color: #666;
    border-top: 1px solid #ddd;
    font-size: 13px;
    letter-spacing: 1px;
    line-height: 56px;
}
.list .item .content p{
    line-height: 14px;
    margin-top:5px;
}
</style>